import { useState, useEffect } from "react";
import './index.less';
import { Route, Switch, Redirect, useHistory } from "react-router-dom";
import Yxfx from './Yxfx';
import ChangePanel from '../ChangePanel';

import Fhmb from '../Fhmb';
import Bc from '../Bc';
import Bgsc from '../Bgsc';
import Jyll from './Jyll';
import Jzzy from "./Jzzy";
import Lspg from '../Lspg'
import Yujinmsg from "../../Yujinmsg";


export default function Dztool(props) {
    const [showButtons, setShowButtons] = useState(true);
    const [showHistoryButton, setShowHistoryButton] = useState(false);
    const handleEvalCase = () => {
        setShowButtons(false);
        setShowHistoryButton(true);
    }
    //地震速报
    const [open, setOpen] = useState(false);
    const handleOpen = () => {
        setOpen(!open);
        setShowButtons(true);
        //取消额外的组件显示
        //影响分析
        setIsReportOpen(false);
        //防护
        setOpenFh(false);
        //救援力量
        setIsReport(false);
        //救灾资源
        setReport(false);
        //报告生成
        setBgOpen(false);
        //历史评估
        setLspgOpen(false);
        //保存
        setOpenSave(false);
    };
    //影响分析
    const [isReportOpen, setIsReportOpen] = useState(false);
    const handleClick = () => {
        setIsReportOpen(!isReportOpen);
        //取消额外的组件显示
        //地震速报
        setOpen(false);
        //防护
        setOpenFh(false);
        //救援力量
        setIsReport(false);
        //救灾资源
        setReport(false);
        //报告生成
        setBgOpen(false);
        //历史评估
        setLspgOpen(false);
        //保存
        setOpenSave(false);
    };
    //防护目标
    const [openFh, setOpenFh] = useState(false);
    const handelFh = () => {
        setOpenFh(!openFh);
        //取消额外的组件显示
        //地震速报
        setOpen(false);
        //影响分析
        setIsReportOpen(false);
        //救援力量
        setIsReport(false);
        //救灾资源
        setReport(false);
        //报告生成
        setBgOpen(false);
        //历史评估
        setLspgOpen(false);
        //保存
        setOpenSave(false);
    }

    //救援力量
    const [isReport, setIsReport] = useState(false);
    const handleIsReport = () => {
        setIsReport(!isReport);
        //取消额外的组件显示
        //地震速报
        setOpen(false);
        //影响分析
        setIsReportOpen(false);
        //防护
        setOpenFh(false);
        //救灾资源
        setReport(false);
        //报告生成
        setBgOpen(false);
        //历史评估
        setLspgOpen(false);
        //保存
        setOpenSave(false);

    };
    //救灾资源
    const [Report, setReport] = useState(false);
    const handleReport = () => {
        setReport(!Report);
        //取消额外的组件显示
        //地震速报
        setOpen(false);
        //影响分析
        setIsReportOpen(false);
        //防护
        setOpenFh(false);
        //救援力量
        setIsReport(false);
        //报告生成
        setBgOpen(false);
        //历史评估
        setLspgOpen(false);
        //保存
        setOpenSave(false);
    };

    //报告生成
    const [bgOpen, setBgOpen] = useState(false);
    const handleBgClick = () => {
        setBgOpen(!bgOpen);
        //取消额外的组件显示
        //地震速报
        setOpen(false);
        //影响分析
        setIsReportOpen(false);
        //防护
        setOpenFh(false);
        //救援力量
        setIsReport(false);
        //救灾资源
        setReport(false);
        //历史评估
        setLspgOpen(false);
        //保存
        setOpenSave(false);
    }

    //保存
    const [openSave, setOpenSave] = useState(false);
    const handSave = () => {
        setOpenSave(!openSave);
        //取消额外的组件显示
        //地震速报
        setOpen(false);
        //影响分析
        setIsReportOpen(false);
        //防护
        setOpenFh(false);
        //救援力量
        setIsReport(false);
        //救灾资源
        setReport(false);
        //报告生成
        setBgOpen(false);
        //历史评估
        setLspgOpen(false);


    }
    //历史评估
    const [lspgOpen, setLspgOpen] = useState(false);
    const handleLsOpen = () => {
        setLspgOpen(!lspgOpen);
        //取消额外的组件显示
        //地震速报
        setOpen(false);
        //影响分析
        setIsReportOpen(false);
        //防护
        setOpenFh(false);
        //救援力量
        setIsReport(false);
        //救灾资源
        setReport(false);
        //报告生成
        setBgOpen(false);
        //保存
        setOpenSave(false);

    }


    // const history = useHistory();
    // const [datas, setDatas] = useState();

    return <>
     {/* className='dz-tool' 功能层 */}
        <div className='dz-tool' style={{
           
            position: 'absolute',
            top: 50,
            left: 0,
            zIndex: 10,
            width: 40,
        }}>
            <div><button onClick={handleOpen}></button></div>
            {showButtons && (
                <>
                    <div><button onClick={handleClick}></button> </div>
                    <div><button onClick={handelFh}></button></div>
                    <div><button onClick={handleIsReport}></button>
                        <button onClick={handleReport}></button></div>
                    <div><button onClick={handleBgClick}></button></div>
                    <div><button onClick={handSave}></button></div>
                    <div><button onClick={handleEvalCase}></button></div>
                </>
            )}
            {!showButtons && showHistoryButton && <div><button onClick={handleLsOpen}></button></div>}
        </div>
{/* className='dz-tool' 内容层 */}
        <div className='dz-tool1' style={{
            position: 'absolute',
            top: 50,
            left: 4,
            zIndex: 9,
            width: 40,
        }}>
            <div><button onClick={handleOpen}>地震速报</button></div>
            {showButtons && (
                <>
                    <div><button onClick={handleClick}>影响分析</button> </div>
                    <div><button onClick={handelFh}>防护目标</button></div>
                    <div><button onClick={handleIsReport}>救援力量</button>
                        <button onClick={handleReport}>救灾资源</button></div>
                    <div><button onClick={handleBgClick}>报告生成</button></div>
                    <div><button onClick={handSave}>保存</button></div>
                    <div><button onClick={handleEvalCase}>评估案例</button></div>
                </>
            )}
            {!showButtons && showHistoryButton && <div><button onClick={handleLsOpen}>历史案例</button></div>}
        </div>
{/* className='dz-tool2' 背景层 */}
        <div className='dz-tool2' style={{
            background: 'rgba(1,15,31,0.5)',
            position: 'absolute',
            top: 50,
            left: 0,
            zIndex: 8,
            width: 40,
        }}>
            <div><span ></span></div>
            {showButtons && (
                <>
                    <div><span ></span> </div>
                    <div><span ></span></div>
                    <div><span ></span>
                        <span ></span></div>
                    <div><span ></span></div>
                    <div><span ></span></div>
                    <div><span ></span></div>
                </>
            )}
            {!showButtons && showHistoryButton && <div><span ></span></div>}
        </div>

        {open && <ChangePanel />}
        {isReportOpen && <Yxfx />}
        {openFh && <Fhmb />}
        {isReport && <Jyll />}
        {Report && <Jzzy />}
        {bgOpen && <Bgsc />}
        {openSave && <Bc />}
        {lspgOpen && <Lspg />}
        {/* {!isReportOpen && !openFh && !isReport && !Report && !bgOpen && !openSave  && <Yujinmsg />} */}
        
    </>

}